<template>
	<view class="search">
		<image class="background" mode="widthFix" src="@/static/images/index/search-bg.png" />
		<!--优惠券增长-->
		<view class="coupon-number">
			共有
			<view class="num-block" v-for="(item, index) in couponTotal" :key="index">
				{{ item }}
			</view>
			张天猫/淘宝隐藏券
		</view>
		<view class="search-bar" @tap="toSearch()">
			<image mode="widthFix" class="image" src="@/static/images/index/search-bar.png" />
			<!-- 轮播 -->
			<swiper
				class="swiper"
				:autoplay="true"
				:vertical="true"
				:interval="3000"
				:duration="500"
				:circular="true"
				:disable-touch="true"
			>
				<template v-if="shareTemplate.length > 0">
					<swiper-item v-for="(item, index) in shareTemplate" :key="index">
						<view class="swiper-item">{{ item }}</view>
					</swiper-item>
				</template>
				<swiper-item v-else>
					<view class="swiper-item">复制淘宝天猫商品，领券下单拿补贴~</view>
				</swiper-item>
			</swiper>
			<view class="search-btn">搜券</view>
		</view>

		<!--省钱教程-->
		<view class="course">
			<view class="top">
				<text class="text">三步省钱</text>
				<view class="course-btn" @tap="$Router.push('/pages/course/list')">
					教程<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
			<view class="bottom">
				<view class="box">
					<view class="num-icon">1</view>
					<view class="text">
						打开
						<image src="@/static/images/index/search-tb.png"></image>
						<image src="@/static/images/index/search-jd.png"></image>
						<image src="@/static/images/index/search-pdd.png"></image>
					</view>
				</view>
				<view class="box">
					<view class="num-icon">2</view>
					<view class="text">复制商品标题/链接</view>
				</view>
				<view class="box">
					<view class="num-icon">3</view>
					<view class="text">打开嗨返</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Search',
	props: {
		shareTemplate: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	created() {
		this.couponCount();
	},
	data() {
		return {
			couponTotal: ['0', '0', '0', '0', '0', '0', '0']
		};
	},
	methods: {
		toSearch() {
			this.$Router.push('/pages/goods/search');
		},
		couponCount() {
			this.$service.shopping.goods.couponCount().then(res => {
				this.numberGrowth(res.totle);
			});
		},
		// 数字增长
		numberGrowth(value) {
			// 将数据除以12，计算步长
			let step = Math.round(parseInt(value) / 22);
			let current = 0;
			let start = 0;
			let t = setInterval(() => {
				start += parseInt(step);
				if (start > value) {
					clearInterval(t);
					start = value;
					t = null;
				}
				if (current === start) {
					return false;
				}
				current = parseInt(start);
				this.couponTotal = String(current).split('');
			}, 50);
		}
	}
};
</script>

<style lang="scss" scoped>
.search {
	text-align: center;
	height: 475rpx;
	@include flexBox(flex-start, center, column);
	.background {
		position: absolute;
		height: 475rpx;
		width: 100%;
		z-index: 1;
	}
	.coupon-number {
		margin-top: 148rpx;
		color: $color-white;
		font-size: 26rpx;
		font-weight: 400;
		z-index: 2;
		@include flexBox(center);
		.num-block {
			font-size: 24rpx;
			width: 22rpx;
			height: 28rpx;
			line-height: 28rpx;
			background: rgba(221, 0, 13, 1);
			border-radius: 4rpx;
			margin: 0 3rpx;
		}
	}
	.search-bar {
		width: 680rpx;
		height: 93rpx;
		margin-top: 30rpx;
		position: relative;
		z-index: 2;
		@include flexBox(space-between, center);
		.image {
			width: 100%;
			height: 93rpx;
		}
		.swiper {
			position: absolute;
			top: 0;
			left: 90rpx;
			width: 434rpx;
			height: 93rpx;
			overflow: hidden;
			.swiper-item {
				line-height: 93rpx;
				text-align: left;
				color: #8b8b8b;
				font-size: 26rpx;
				@include ellipsis(1);
			}
		}
		.search-btn {
			line-height: 93rpx;
			position: absolute;
			right: 22rpx;
			font-size: 28rpx;
			color: #BE000F;
		}
	}
	.course {
		z-index: 2;
		width: 680rpx;
		.top {
			margin-top: 20rpx;
			@include flexBox(space-between, center);
			.text {
				color: #fff;
				font-size: 28rpx;
			}
			.course-btn {
				width: 126rpx;
				line-height: 40rpx;
				background: #fd6274;
				color: #fff;
				border-radius: 50rpx;
				font-size: 24rpx;
				transition: 0.3s;
				padding-left: 10rpx;
				border: 2rpx solid #ffa5a5;
				@include flexBox(center, center);
				.iconfont {
					font-size: 22rpx;
				}
				&:hover {
					color: #e83f28;
					border-color: $color-white;
					background: $color-white;
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			font-size: 20rpx;
			@include flexBox(space-between, center);
			.box {
				@include flexBox(center, center);
				.num-icon {
					font-size: 24rpx;
					margin-right: 8rpx;
					width: 30rpx;
					height: 30rpx;
					color: #FFFFFF;
					background: #FF4D5B;
					border: 2rpx solid #FF9696;
					border-radius: 50%;
					line-height: 30rpx;
					text-align: center;
				}
				.text {
					color: #fff;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-left: 6rpx;
					}
				}
			}
		}
	}
}
</style>
